<template>
  <border :moduleType="borderConfig.moduleType"
          :icon="borderConfig.icon"
          :titleText="borderConfig.titleText"
          :organType="borderConfig.organType"
          :goPageUrl="borderConfig.goPageUrl">
    <div slot="module-content"
         class="module"
         :class="{'octagon-module': moduleConfig.isOctagon}">
      <div class="octagon-list"
           v-if="moduleConfig.isOctagon">
        <octagon v-for="(item, index) in octagon.iconClass"
                 :iconClass="item"
                 :octagonName="octagon.octagonName[index]"
                 :octagonNumber="octagon.octagonNumber[index]"
                 :octagonUnit="octagon.octagonUnit[index]"
                 :key="item"></octagon>
      </div>
      <div class="module-legend"
           v-if="moduleConfig.isModuleLegend"
           :style="'left:' + moduleLegend.left + ';top:' + moduleLegend.top + ';right:' + moduleLegend.right + ';bottom:' + moduleLegend.bottom">
        <span class="module-legend-li" v-for="(item, index) in moduleLegend.message" :key="index"><i></i>{{ item }}</span>
      </div>
      <div class="module-top once" v-if="moduleConfig.topType == '1'">
        <barLine
          ref="barLineTop"
          :title="barLineConfigTop.title"
          :legend="barLineConfigTop.legend"
          :xAxis="barLineConfigTop.xAxis"
          :yAxis="barLineConfigTop.yAxis"
          :tooltip="barLineConfigTop.tooltip"
          :dataZoom="barLineConfigTop.dataZoom"
          :seriesData="barLineConfigTop.seriesData"
          :axis="barLineConfigTop.axis"
          :config="barLineConfigTop.config"
          :grid="barLineConfigTop.grid"
          :tooltipsConfig="barLineConfigTop.tooltipsConfig"
          :isCallback="barLineConfigTop.isCallback"></barLine>
      </div>
      <div class="module-top" v-if="moduleConfig.topType == '12'">
        <barLine
          ref="barLineTop"
          :title="barLineConfigTop.title"
          :legend="barLineConfigTop.legend"
          :xAxis="barLineConfigTop.xAxis"
          :yAxis="barLineConfigTop.yAxis"
          :tooltip="barLineConfigTop.tooltip"
          :dataZoom="barLineConfigTop.dataZoom"
          :seriesData="barLineConfigTop.seriesData"
          :axis="barLineConfigTop.axis"
          :config="barLineConfigTop.config"
          :grid="barLineConfigTop.grid"
          :tooltipsConfig="barLineConfigTop.tooltipsConfig"
          :isCallback="barLineConfigTop.isCallback"></barLine>
        <gauge
          ref="gaugeTop"
          :title="gaugeTop.title"
          :angle="gaugeTop.angle"
          :radius="gaugeTop.radius"
          :borderColor="gaugeTop.borderColor">
        </gauge>
      </div>
      <div class="module-top" v-if="moduleConfig.topType == '13'">
        <barLine
          ref="barLineTop"
          :title="barLineConfigTop.title"
          :legend="barLineConfigTop.legend"
          :xAxis="barLineConfigTop.xAxis"
          :yAxis="barLineConfigTop.yAxis"
          :tooltip="barLineConfigTop.tooltip"
          :dataZoom="barLineConfigTop.dataZoom"
          :seriesData="barLineConfigTop.seriesData"
          :axis="barLineConfigTop.axis"
          :config="barLineConfigTop.config"
          :grid="barLineConfigTop.grid"
          :tooltipsConfig="barLineConfigTop.tooltipsConfig"
          :isCallback="barLineConfigTop.isCallback"></barLine>
        <pyramid :title="pyramidTop.title"
                 :imgIndex="pyramidTop.imgIndex"
                 :tipsMessage="pyramidTop.tipsMessage"
                 :imgSrc="pyramidTop.imgSrc"
                 :tipsColor="pyramidTop.tipsColor"
                 :legend="pyramidTop.legend"></pyramid>
      </div>
      <div class="module-top" v-if="moduleConfig.topType == '14'">
        <barLine
          ref="barLineTop"
          :title="barLineConfigTop.title"
          :legend="barLineConfigTop.legend"
          :xAxis="barLineConfigTop.xAxis"
          :yAxis="barLineConfigTop.yAxis"
          :tooltip="barLineConfigTop.tooltip"
          :dataZoom="barLineConfigTop.dataZoom"
          :seriesData="barLineConfigTop.seriesData"
          :axis="barLineConfigTop.axis"
          :config="barLineConfigTop.config"
          :grid="barLineConfigTop.grid"
          :tooltipsConfig="barLineConfigTop.tooltipsConfig"
          :isCallback="barLineConfigTop.isCallback"></barLine>
        <doubleRing
          ref="doubleRingTop"
          class="chart-right chart-bottom-right"
          :legend="doubleRingTop.legend"
          :data="doubleRingTop.data"></doubleRing>
      </div>
      <div class="module-top once" v-if="moduleConfig.topType == '2'">
        <gauge
          ref="gaugeTop"
          :title="gaugeTop.title"
          :angle="gaugeTop.angle"
          :radius="gaugeTop.radius"
          :borderColor="gaugeTop.borderColor">
        </gauge>
      </div>
      <div class="module-bottom once" v-if="moduleConfig.bottomType == '1'">
        <barLine
          ref="barLineBottom"
          :title="barLineConfigBottom.title"
          :legend="barLineConfigBottom.legend"
          :xAxis="barLineConfigBottom.xAxis"
          :yAxis="barLineConfigBottom.yAxis"
          :tooltip="barLineConfigBottom.tooltip"
          :dataZoom="barLineConfigBottom.dataZoom"
          :seriesData="barLineConfigBottom.seriesData"
          :axis="barLineConfigBottom.axis"
          :config="barLineConfigBottom.config"
          :grid="barLineConfigBottom.grid"
          :tooltipsConfig="barLineConfigBottom.tooltipsConfig"
          :isCallback="barLineConfigBottom.isCallback"></barLine>
      </div>
      <div class="module-bottom" v-if="moduleConfig.bottomType == '12'">
        <barLine
          ref="barLineBottom"
          :title="barLineConfigBottom.title"
          :legend="barLineConfigBottom.legend"
          :xAxis="barLineConfigBottom.xAxis"
          :yAxis="barLineConfigBottom.yAxis"
          :tooltip="barLineConfigBottom.tooltip"
          :dataZoom="barLineConfigBottom.dataZoom"
          :seriesData="barLineConfigBottom.seriesData"
          :axis="barLineConfigBottom.axis"
          :config="barLineConfigBottom.config"
          :grid="barLineConfigBottom.grid"
          :tooltipsConfig="barLineConfigBottom.tooltipsConfig"
          :isCallback="barLineConfigBottom.isCallback"></barLine>
        <gauge
          ref="gaugeBottom"
          :title="gaugeBottom.title"
          :angle="gaugeBottom.angle"
          :radius="gaugeBottom.radius"
          :borderColor="gaugeBottom.borderColor">
        </gauge>
      </div>
      <div class="module-bottom" v-if="moduleConfig.bottomType == '13'">
        <barLine
          ref="barLineBottom"
          :title="barLineConfigBottom.title"
          :legend="barLineConfigBottom.legend"
          :xAxis="barLineConfigBottom.xAxis"
          :yAxis="barLineConfigBottom.yAxis"
          :tooltip="barLineConfigBottom.tooltip"
          :dataZoom="barLineConfigBottom.dataZoom"
          :seriesData="barLineConfigBottom.seriesData"
          :axis="barLineConfigBottom.axis"
          :config="barLineConfigBottom.config"
          :grid="barLineConfigBottom.grid"
          :tooltipsConfig="barLineConfigBottom.tooltipsConfig"
          :isCallback="barLineConfigBottom.isCallback"></barLine>
        <pyramid :title="pyramidBottom.title"
                 :imgIndex="pyramidBottom.imgIndex"
                 :tipsMessage="pyramidBottom.tipsMessage"
                 :imgSrc="pyramidBottom.imgSrc"
                 :tipsColor="pyramidBottom.tipsColor"
                 :legend="pyramidBottom.legend"></pyramid>
      </div>
      <div class="module-bottom" v-if="moduleConfig.bottomType == '14'">
        <barLine
          ref="barLineBottom"
          :title="barLineConfigBottom.title"
          :legend="barLineConfigBottom.legend"
          :xAxis="barLineConfigBottom.xAxis"
          :yAxis="barLineConfigBottom.yAxis"
          :tooltip="barLineConfigBottom.tooltip"
          :dataZoom="barLineConfigBottom.dataZoom"
          :seriesData="barLineConfigBottom.seriesData"
          :axis="barLineConfigBottom.axis"
          :config="barLineConfigBottom.config"
          :grid="barLineConfigBottom.grid"
          :tooltipsConfig="barLineConfigBottom.tooltipsConfig"
          :isCallback="barLineConfigBottom.isCallback"></barLine>
        <doubleRing
          ref="doubleRingBottom"
          class="chart-right chart-bottom-right"
          :legend="doubleRingBottom.legend"
          :color="doubleRingBottom.color"
          :data="doubleRingBottom.data"></doubleRing>
      </div>
      <div class="module-bottom three-gauge" v-if="moduleConfig.bottomType == '222'">
        <gauge
          ref="gaugeBottom"
          :title="gaugeBottom.title"
          :angle="gaugeBottom.angle"
          :radius="gaugeBottom.radius"
          :borderColor="gaugeBottom.borderColor">
        </gauge>
        <gauge
          ref="gaugeBottom1"
          :title="gaugeBottom2.title"
          :angle="gaugeBottom2.angle"
          :radius="gaugeBottom2.radius"
          :borderColor="gaugeBottom2.borderColor">
        </gauge>
        <gauge
          ref="gaugeBottom2"
          :title="gaugeBottom3.title"
          :angle="gaugeBottom3.angle"
          :radius="gaugeBottom3.radius"
          :borderColor="gaugeBottom3.borderColor">
        </gauge>
      </div>
    </div>
  </border>
</template>
<script>
import border from './Border.vue'
import barLine from './BarLine.vue'
import gauge from './Gauge.vue'
import pyramid from './Pyramid.vue'
import octagon from './Octagon.vue'
import doubleRing from './DoubleRing.vue'
export default {
  name: 'module',
  components: {
    border,
    barLine,
    gauge,
    pyramid,
    octagon,
    doubleRing
  },
  props: {
    borderConfig: {
      type: Object,
      required: true
    },
    // 模块配置，单个小模块有哪些内容的配置信息, topType和bottomType的选择有:barLine,gauge,pyramid,doubleRing,
    moduleConfig: {
      type: Object,
      required: true,
      default: () => {
        return {
          isOctagon: false, // 是否需要头部的八边形
          isModuleLegend: false, // 是否需要整体legend
          topType: '', // 第一层显示内容
          bottomType: '' // 第二层显示内容
        }
      }
    },
    // 模块设置的legend
    moduleLegend: {
      type: Object,
      default: () => {
        return {
          message: [], // legend.name
          color: [], // legend.color
          top: 'auto', // 位置
          left: 'auto', // 位置
          bottom: 'auto', // 位置
          right: 'auto' // 位置
        }
      }
    },
    // 八边形的配置信息
    octagon: {
      type: Object
    },
    // 上半部的柱状图或者折线图配置
    barLineConfigTop: {
      type: Object
    },
    // 上半部的仪表盘配置
    gaugeTop: {
      type: Object
    },
    // 上半部金字塔的配置
    pyramidTop: {
      type: Object
    },
    // 上半部双圆环的配置
    doubleRingTop: {
      type: Object
    },
    // 下半部的柱状图或者折线图配置
    barLineConfigBottom: {
      type: Object
    },
    // 下半部的仪表盘配置
    gaugeBottom: {
      type: Object
    },
    gaugeBottom2: {
      type: Object
    },
    gaugeBottom3: {
      type: Object
    },
    // 下半部金字塔的配置
    pyramidBottom: {
      type: Object
    },
    // 下半部双圆环的配置
    doubleRingBottom: {
      type: Object
    }
  },
  data () {
    return {
    }
  },
  methods: {
    resizeChart (type) {
      if (this.$refs.barLineTop) {
        this.$refs.barLineTop.resizeChart(type)
      }
      if (this.$refs.barLineBottom) {
        this.$refs.barLineBottom.resizeChart()
      }
      if (this.$refs.doubleRingTop) {
        this.$refs.doubleRingTop.resizeChart()
      }
      if (this.$refs.doubleRingBottom) {
        this.$refs.doubleRingBottom.resizeChart()
      }
      if (this.$refs.gaugeTop) {
        this.$refs.gaugeTop.resizeChart()
      }
      if (this.$refs.gaugeBottom) {
        this.$refs.gaugeBottom.resizeChart()
      }
      if (this.$refs.gaugeBottom2) {
        this.$refs.gaugeBottom2.resizeChart()
      }
      if (this.$refs.gaugeBottom3) {
        this.$refs.gaugeBottom3.resizeChart()
      }
    }
  },
  mounted () {
  },
  watch: {
  }
}
</script>
<style lang="scss" scoped>
  // 客户满意度
  .module{
    width: 100%;
    height: 100%;
    /*padding-top: 9.6%;*/
    padding-top: 10px;
    box-sizing: border-box;
    position: relative;
    &.octagon-module{
      padding-top: 0;
      .module-top,.module-bottom{
        height: 39.5%;
      }
    }
    .octagon-list {
      width: 100%;
      overflow: hidden;
      .octagon {
        &:first-of-type {
          margin: 0 10px 0 31%;
        }
      }
    }
    .module-legend{
      position: absolute;
      top: 9%;
      width: 100%;
      margin-top: 10px;
      font-size: 12px;
      padding-left: 10%;
      color: #fff;
      box-sizing: border-box;
      text-align: right;
      padding-right:20px;
      .module-legend-li{
        display: inline-block;
        margin-left: 10px;
        &:nth-of-type(1) {
          i{
            background: #1ca7e1;
          }
        }
        &:nth-of-type(2) {
          i{
            background: #ba0577;
          }
        }
        &:nth-of-type(3) {
          i{
            background: #f29f46;
          }
        }
        i{
          display: inline-block;
          width: 8px;
          height: 8px;
          margin-right:4px;
          border-radius: 100%;
        }
      }
    }
    .module-top,.module-bottom{
      width: 100%;
      height: 49%;
      &.once{
        .bar-line,.gauge{
          width: 100%;
        }
      }
      &.three-gauge{
        text-align: center;
        .gauge{
          width: 30%;
          height: 100%;
          display: inline-block;
          position: relative;
          float: inherit;
        }
      }
      .bar-line{
        width: 64%;
        height: 100%;
        float: left;
      }
      .gauge,.pyramid,.double-ring{
        width: 36%;
        height: 100%;
        float: left;
      }
    }
  }
</style>
